<script setup>
import FloatingBackButton from '@/components/common/FloatingBackButton.vue'
</script>

<template>
  <div class="page">
    <div class="container">
      <div class="header">
        <h2>统计概览</h2>
      </div>
      <div class="grid">
        <div class="card elevated">
          <div class="num" style="color: var(--color-primary)">23</div>
          <div class="label">本月申请</div>
        </div>
        <div class="card elevated">
          <div class="num" style="color: var(--color-success)">87%</div>
          <div class="label">通过率</div>
        </div>
        <div class="card elevated">
          <div class="num" style="color: var(--color-info)">6.2h</div>
          <div class="label">平均处理时长</div>
        </div>
      </div>
      <div class="card elevated">
        <h3 class="section-title">类型占比（示意）</h3>
        <div class="placeholder">图表占位</div>
      </div>
    </div>
    <FloatingBackButton />
  </div>
</template>

<style scoped>
.page {
  position: fixed;
  inset: 0;
  padding: 32px 24px;
  overflow: auto;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 105, 0, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(255, 105, 0, 0.04) 0%, transparent 40%);
}
.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.elevated {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
.num {
  font-size: 24px;
  font-weight: 800;
}
.label {
  color: var(--muted-text);
}
.section-title {
  font-size: 16px;
}
.placeholder {
  height: 200px;
  border: 1px dashed #e5e7eb;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-text);
}
</style>
